//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
} from 'antd';
import SelectMenuTree from '@/components/SelectMenuTree';
const FormItem = Form.Item;
const { Option } = Select;


// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
    static defaultProps = {
        handleUpdate: () => {},
    		handleUpdateModalVisible: () => {},
				values: {},
		};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            id: props.values.id,
            text: props.values.text,
           	href: props.values.href,
            parentid: props.values.parentid,
            parent_name: props.values.parent_name,
            levelcode: props.values.levelcode,
            component: props.values.component,
            i18n_name: props.values.i18n_name,
            redirect: props.values.redirect,
            enable: props.values.enable,
            
            indexs: props.values.indexs,
            recordid: props.values.recordid,
            icon: props.values.icon,
            sequences: props.values.sequences,
            hreftarget: props.values.hreftarget,
            valid: props.values.valid,
            leaf: props.values.leaf,
            systemid: props.values.systemid,
            isframe: props.values.isframe,
            leaftype: props.values.leaftype,
            cls: props.values.cls,
            hideInMenu: props.values.hideInMenu,
            hideChildrenInMenu: props.values.hideChildrenInMenu,
        },
        getMenuTreeBySelectTree: "",
    };

}

  selectedMenuTreeValue = (deptRecord) => {
			this.setState({
				getMenuTreeBySelectTree: deptRecord
			})
	}

 	handleLocalUpdate = () => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue,getMenuTreeBySelectTree } = this.state;
    form.validateFields((err, fieldsValue) => {
		    if (err) return;
		    const formVals = { ...oldValue, ...fieldsValue };
		    this.setState({
		        formVals,
		    });
	      
	      	if(getMenuTreeBySelectTree) {
		    	formVals.levelcode = getMenuTreeBySelectTree.triggerNode.props.dataRef.levelcode + "/" + formVals.id;
				formVals.parentid = getMenuTreeBySelectTree.triggerNode.props.dataRef.key;
				formVals.parent_name = getMenuTreeBySelectTree.triggerNode.props.dataRef.title;
			}
	     
	    	handleUpdate(formVals);

    });
  };


renderContent = (formVals) => {
    const { form, menu,requestModelName,values:{type} } = this.props;
		const parentMenuTreeMethod = {
				menu,
				selectedMenuTreeValue: this.selectedMenuTreeValue,
				requestModelName,
		}
    return (
        <Form  layout="vertical">

					{type == 1?(
						<div>
								<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


                    <Col  md={12} sm={24}>
	                    <FormItem  label="菜单名称">
	                        {form.getFieldDecorator('text', {
	                        rules: [{ required: true, message: '请输入菜单名称！', min: 1 }],
	                        initialValue: formVals.text,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>
					
					
					
                    <Col  md={12} sm={24}>
	                    <FormItem  label="链接">
	                        {form.getFieldDecorator('href', {
	                        rules: [{ required: true, message: '请输入链接！', min: 1 }],
	                        initialValue: formVals.href,
	                        })(<Input placeholder="请输入" />)}
	                    </FormItem>
                    </Col>


                </Row>

				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

					<Col  md={12} sm={24}>
				        <FormItem  label="国际化菜单名">
				            {form.getFieldDecorator('i18n_name', {
				            rules: [{ required: true, message: '请输入国际化菜单名！', min: 1 }],
				            initialValue: formVals.i18n_name,
				            })(<Input placeholder="请输入" />)}
				        </FormItem>
			        </Col>
			        <Col md={12} sm={24}>
				        <FormItem label="状态">
				            {form.getFieldDecorator('enable',{
				            	initialValue: formVals.enable + "",
				            })(
				                <Select placeholder="请选择" style={{ width: '100%' }}>
				                    <Option value="1">可用</Option>
				                    <Option value="0">禁用</Option>
				                </Select>
				            )}
				        </FormItem>
			        </Col>
		
		    	</Row>
		   		<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

						<Col  md={12} sm={24}>
			        <FormItem  label="路由组件">
			            {form.getFieldDecorator('component', {
			            rules: [{ required: false, message: '请输入路由组件！', min: 1 }],
			            initialValue: formVals.component,
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
		        <Col  md={12} sm={24}>
			        <FormItem  label="路由重定向">
			            {form.getFieldDecorator('redirect', {
			            rules: [{ required: false, message: '请输入路由重定向！', min: 1 }],
			            initialValue: formVals.redirect,
			            })(<Input placeholder="请输入" />)}
			        </FormItem>
		        </Col>
	
	    		</Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

					        <Col  md={12} sm={24}>
						        <FormItem  label="上级菜单">
						            {form.getFieldDecorator('menu')(
						               	<SelectMenuTree {...parentMenuTreeMethod} menuValues={formVals.parent_name}/>
						            )}
						        </FormItem>
					        </Col>

                </Row>            
				</div>
					):(
						<div>
							<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


			                    <Col  md={12} sm={24}>
				                    <FormItem  label="按钮名称">
				                        {form.getFieldDecorator('text', {
				                        rules: [{ required: true, message: '请输入按钮名称！', min: 1 }],
				                        initialValue: formVals.text,
				                        })(<Input placeholder="请输入" />)}
				                    </FormItem>
			                    </Col>
								
								
								
			                  	<Col  md={12} sm={24}>
							        <FormItem  label="上级菜单">
							            {form.getFieldDecorator('menu')(
							               	<SelectMenuTree {...parentMenuTreeMethod} menuValues={formVals.parent_name}/>
							            )}
							        </FormItem>
						        </Col>
			
			
			                </Row>
						</div>
					)}                    
      
    </Form>
);

};



render() {
    const { updateModalVisible, handleUpdateModalVisible, values} = this.props;
    const { formVals } = this.state;
		
    return (
        <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title={values.type == 1?"修改菜单":"修改按钮"}
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}				


export default UpdateForm;
